<template>
    <view class="homepage" v-if="userData">
        <view class="search_top_nav" :style="{ background: bgColor, paddingTop: statusBarHeight }">
            <view class="search_nav_content">
                <view @click="back" style="width: 76rpx; height: 88rpx">
                    <image
                        style="margin-left: 28rpx; height: 36rpx; width: 20rpx; margin-top: 26rpx"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/back1.png"
                        v-if="color == 'white'"
                    ></image>
                    <image
                        style="margin-left: 28rpx; height: 36rpx; width: 20rpx; margin-top: 26rpx"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/back.png"
                        v-if="color == 'black'"
                    ></image>
                </view>
                <label
                    v-if="userData.nickname"
                    class="search_title"
                    style="width: 36%; left: 32%"
                    :style="{ color: color }"
                    >{{ newTitle }}的主页</label
                >
            </view>
        </view>
        <view
            v-if="imgUrl()"
            class="search_top_back"
            :style="{ backgroundImage: 'url(' + imgUrl() + 'homepage.png' + ')' }"
        >
        </view>
        <!-- #ifndef MP-WEIXIN -->
        <view style="height: 88rpx"></view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view style="height: 88rpx"></view>
        <!-- #endif -->
        <view class="homepage-main">
            <view class="homepage-user">
                <view class="homepage-user-icon">
                    <image style="border-radius: 50%" :src="userData.avatarAbsolute" mode=""></image>
                </view>
                <view class="homepage-user-num">
                    <view @click="goToFollow" class="homepage-user-item">
                        <view class="user-num">{{ userData.follows }}</view>
                        <text>关注</text>
                    </view>
                    <view @click="goToFans" class="homepage-user-item">
                        <view class="user-num">{{ userData.fans }}</view>
                        <text>粉丝</text>
                    </view>
                    <view class="homepage-user-item">
                        <view class="user-num">{{ userData.thumbs }}</view>
                        <text>获赞</text>
                    </view>
                </view>
            </view>

            <view class="homepage-name">
                <view class="homepage-name1">{{ userData.nickname || userData.name }}</view>
                <view v-if="userInfo.uid != userData.uid">
                    <view class="search-right1" v-if="userData.followStatus == 0" @click="goCollect(userData)">
                        <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search/add.png" mode=""></image>
                        关注
                    </view>
                    <view class="search-right2" v-else @click="goCollect(userData)">已关注</view>
                </view>
                <view v-else @click="goToPersonal" class="homepage-btn">编辑</view>
            </view>
            <view style="height: 20rpx; background-color: #f8f8f8; width: 100%"></view>
            <view class="article-main" v-for="(item, index) in trends" :key="index" style="margin-bottom: 20rpx">
                <view
                    @click="goToDetail(item)"
                    v-if="(item.delStatus == 1 && item.userId == userInfo.uid) || item.delStatus !== 1"
                >
                    <view class="search-article" style="position: relative">
                        <view class="article-left">
                            <view class="article-avatar">
                                <u-image width="80rpx" height="80rpx" :src="item.avatarAbsolute" shape="circle">
                                </u-image>
                            </view>
                            <view class="article-title1">
                                <view>{{ item.userName }}</view>
                                <view class="article-time">
                                    {{ request.getDateTimeFormat(item.publishTime) }}
                                    <text>发布了</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view
                        style="z-index: 801"
                        v-if="userInfo.uid == userData.uid"
                        @click.stop="deleteEvent(item)"
                        class="homepage-right delete-icon"
                    >
                        <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/wo/actict-laji.png" mode=""></image>
                    </view>
                    <view class="articleTitle">{{ item.title }}</view>
                    <view class="articleContent">{{ item.experience }}</view>
                    <view v-if="item.picList.length > 0" style="position: relative" class="articleImg">
                        <!-- 			<image @click.stop="showImagePrevie(indexs, item)"
							v-for="(img, indexs) in item.picList.slice(0, 3)" :key="indexs" :src="img" mode=""></image>
						<label v-if="item.picList.length > 3" style="
                                border-top-left-radius: 10rpx;
                                border-bottom-right-radius: 24rpx;
                                line-height: 48rpx;
                                width: 48rpx;
                                height: 48rpx;
                                text-align: center;
                                font-size: 22rpx;
                                color: #fff;
                                background-color: rgba(0, 0, 0, 0.4);
                                position: absolute;
                                bottom: 0;
                                right: 0;
                            ">
							+{{ item.picList.length - 3 }}
						</label> -->
                        <view class="imgItem" v-for="(img, indexs) in item.picList.slice(0, 3)" :key="indexs">
                            <image @click.stop="showImagePrevie(indexs, item)" :src="img" mode="" class="imgPic">
                            </image>
                            <label v-show="item.picList.length > 3 && indexs === 2" class="overLabel"
                                >+{{ item.picList.length - 3 }}</label
                            >
                        </view>
                    </view>
                    <view class="articleBottom" style="justify-content: space-between; margin-top: 30rpx">
                        <view class="articleBottom_tag">
                            <view @click.stop="goToTopic(item.topicId)" v-if="item.topicId" class="articleBottom-left">
                                <view class="text">#</view>
                                <view class="texe1">{{ item.topicName }}</view>
                            </view>
                            <view v-else style="height: 34rpx; width: 34rpx"></view>
                        </view>
                        <view class="articleBottom-right">
                            <view class="article-message">
                                <image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_comment.png" mode=""></image>
                                <text>{{ item.comments }}</text>
                            </view>
                            <view @click.stop="doTrends(item)" class="article-message">
                                <image
                                    v-if="item.thumbsStatus == 0"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good.png"
                                    mode=""
                                ></image>
                                <image
                                    v-if="item.thumbsStatus == 1"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good_sel.png"
                                    mode=""
                                ></image>
                                <text v-if="item.thumbsStatus == 0">{{ item.thumbs }}</text>
                                <text v-if="item.thumbsStatus == 1" style="color: #ff6f89">{{ item.thumbs }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-if="item.delStatus == 1 && item.userId == userInfo.uid" class="mask" style="z-index: 800">
                    <view class="mask-title">后台已删除</view>
                </view>
                <!-- <view v-if="item.status == 0 && userInfo.uid == userData.uid" class="mask" style="z-index: 800;"><view class="mask-title">后台已隐藏</view></view> -->
            </view>
            <view
                v-if="noData"
                style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 100%;
                    background-color: #f8f8f8;
                "
            >
                <image
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
                    style="margin-top: 136rpx; width: 316rpx; height: 316rpx"
                ></image>
                <label style="margin-top: 20rpx; color: #272a37; font-size: 32rpx">暂无动态</label>
            </view>
        </view>
        <view style="height: 30rpx"></view>
    </view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + "px";
export default {
    data() {
        return {
            statusBarHeight: statusBarHeight,
            Type: 1,
            userData: {},
            trends: [],
            userId: "",
            trendForm: {
                pageNum: 1,
                pageSize: 10,
                isAsc: "descending",
                orderByColumn: "top desc,topTime desc,publishTime",
            },
            status: "loadmore",
            more: false,
            bgColor: null,
            color: "white",
            noData: false,
        };
    },
    onShow() {
        this.requestHomeUser();
    },
    computed: {
        ...mapState(["isLogin", "userInfo"]),
        newTitle() {
            const title = this.userData.nickname || "";
            if (!!title) {
                if (String(title).length > 5) {
                    return `${String(title).slice(0, 4)}...`;
                }
                return title;
            }
            return "";
        },
    },
    onReachBottom() {
        if (this.more == false) return;
        this.status = "loading";
        this.trendForm.pageNum = ++this.trendForm.pageNum;
        this.requestTrendList(false);
    },
    onPageScroll(e) {
        if (e.scrollTop > 30) {
            this.bgColor = "white";
            this.color = "black";
        } else {
            this.bgColor = null;
        }
    },
    methods: {
        tabType(e) {
            this.Type = e;
        },
        back() {
            uni.navigateBack();
        },
        showImagePrevie(index, item) {
            uni.previewImage({
                urls: item.picList,
                current: index,
            });
        },
        imgUrl() {
            return this.request.appImageBaseUrl;
        },
        goToFollow() {
            if (this.userId != "" && this.userInfo.uid != this.userData.uid) {
                uni.navigateTo({
                    url: `/packageMine/pages/fansList/fansList?type=follow&userId=${this.userId}&userName=${
                        this.userData.nickname || this.userData.name
                    }`,
                });
            } else {
                uni.navigateTo({
                    url: `/packageMine/pages/fansList/fansList?type=follow`,
                });
            }
        },
        goToFans() {
            if (this.userId != "" && this.userInfo.uid != this.userData.uid) {
                uni.navigateTo({
                    url: `/packageMine/pages/fansList/fansList?type=fans&userId=${this.userId}&userName=${
                        this.userData.nickname || this.userData.name
                    }`,
                });
            } else {
                uni.navigateTo({
                    url: `/packageMine/pages/fansList/fansList?type=fans`,
                });
            }
        },
        goCollect(item) {
            let form = {
                id: item.uid || item.id,
                followStatus: 1,
            };
            if (item.followStatus == 0) {
                form.followStatus = 1;
                this.request.httpTokenJsonRequest("/mp-api/wx/user/follow", form, "POST", true).then((res) => {
                    if (res.code != 0) {
                        this.helper.showToast(res.message);
                    } else {
                        item.followStatus = 1;
                    }
                });
            } else {
                uni.showModal({
                    cancelText: "取消",
                    confirmText: "确定",
                    title: "是否确认取消关注此用户？",
                    success: (res) => {
                        if (res.confirm) {
                            form.followStatus = 0;
                            this.request
                                .httpTokenJsonRequest("/mp-api/wx/user/follow", form, "POST", true)
                                .then((res) => {
                                    if (res.code != 0) {
                                        this.helper.showToast(res.message);
                                    } else {
                                        item.followStatus = 0;
                                    }
                                });
                        }
                    },
                });
            }
        },
        requestHomeUser() {
            var cmdUserid = this.userInfo.uid;
            if (this.userId != "") {
                cmdUserid = this.userId;
            }
            this.request.httpTokenRequest(`/mp-api/wx/user/home/${cmdUserid}`, null, "POST", true).then((res) => {
                if (res.code == 0) {
                    this.userData = res.data;
                }
            });
        },
        goToDetail(item) {
            uni.navigateTo({
                url: `/pages/community/dynamicDetail/dynamicDetail?id=${item.id}`,
            });
        },
        goToTopic(id) {
            uni.navigateTo({
                url: `/pages/community/topicDetail/topicDetail?id=${id}`,
            });
        },
        goToPersonal() {
            uni.navigateTo({
                url: "/packageMine/pages/personal/personal",
            });
        },
        requestTrendList(isFresh) {
            uni.showLoading({
                title: "加载中",
            });
            var cmdUserid = this.userInfo.uid;
            if (this.userId != "") {
                cmdUserid = this.userId;
            }
            if (isFresh) {
                this.trendForm.pageNum = 1;
                this.trendForm.pageSize = 10;
            }
            this.request
                .httpTokenRequest(`/mp-api/wx/trends/user/list/${cmdUserid}`, this.trendForm, "POST", true)
                .then((res) => {
                    uni.stopPullDownRefresh();
                    if (res.code == 0) {
                        if (res.data.list.length > 0) {
                            this.noData = false;
                            if (isFresh) {
                                this.trends = [...res.data.list];
                            } else {
                                res.data.list.forEach((item) => {
                                    this.trends.push(item);
                                });
                            }
                        } else if (this.trendForm.pageNum === 1 && res.data.list.length === 0) {
                            this.noData = true;
                        }
                        if (res.data.total > this.trends.length) {
                            this.status = "loadmore";
                            this.more = true;
                        } else {
                            this.more = false;
                            this.status = "nomore";
                        }
                    } else {
                        this.more = false;
                        this.status = "nomore";
                        this.noData = true;
                    }
                    uni.hideLoading();
                });
        },
        deleteEvent(item) {
            var that = this;
            uni.showModal({
                cancelText: "取消",
                confirmText: "确认",
                title: "确认删除此条动态？",
                success: (res) => {
                    if (res.confirm) {
                        that.request
                            .httpTokenRequest(`/mp-api/wx/trends/delete/${item.id}`, null, "POST", false)
                            .then((res) => {
                                if (res.code == 0) {
                                    //item.delStatus = 1

                                    for (var i = 0; that.trends.length; i++) {
                                        if (that.trends[i].id === item.id) {
                                            that.trends.splice(i, 1);
                                        }
                                    }
                                }
                            });
                    }
                },
            });
        },
        handleScroll() {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            //let offsetTop = document.querySelector('#boxFixed').offsetTop; //this.isFixed = scrollTop > offsetTop ? true : false;
        },
        doTrends(item) {
            let form = {
                id: item.id,
                thumbsStatus: 1,
            };
            if (item.thumbsStatus == 0) {
                form.thumbsStatus = 1;
                this.request.httpTokenJsonRequest("/mp-api/wx/trends/thumbs", form, "POST", true).then((res) => {
                    if (res.code != 0) {
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    } else {
                        item.thumbsStatus = 1;
                        item.thumbs = item.thumbs + 1;
                    }
                });
            } else {
                form.thumbsStatus = 0;
                this.request.httpTokenJsonRequest("/mp-api/wx/trends/thumbs", form, "POST", true).then((res) => {
                    if (res.code != 0) {
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    } else {
                        item.thumbsStatus = 0;
                        if (item.thumbs > 0) {
                            item.thumbs = item.thumbs - 1;
                        }
                    }
                });
            }
        },
    },
    onLoad(option) {
        this.trends = [];

        if (option.userId) {
            this.userId = option.userId;
        }
        // this.requestHomeUser();
        this.requestTrendList(true);
    },
    onUnload() {
        uni.$emit("dynamicUser", this.userData);
    },
};
</script>

<style lang="scss" scoped>
.search_top_nav {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
}

.search_nav_content {
    width: 100%;
    z-index: 998;
    height: 88rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.article-main {
    width: 100%;
    margin: 0rpx auto;
    padding: 30rpx 30rpx;
    box-sizing: border-box;
    position: relative;
}

.delete-icon {
    position: absolute;
    top: 30rpx;
    right: 0;
}

.mask {
    position: absolute;
    border-radius: 24rpx;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.mask-title {
    width: 188rpx;
    height: 56rpx;
    text-align: center;
    border-radius: 28rpx;
    color: #fff;
    font-size: 28rpx;
    line-height: 56rpx;
    background: rgba(0, 0, 0, 0.5);
}

.articleBottom-left {
    border: 1rpx solid #ccc;
    border-radius: 24rpx;
    display: inline-flex;
    align-items: center;
    font-size: 24rpx;
    line-height: 34rpx;
    font-weight: 400;
    min-height: 46rpx;
    padding-right: 12rpx;
}

.articleBottom-left .text {
    background-color: #ff822e;
    color: #fff;
    text-align: center;
    font-size: 24rpx;
    margin: 0 6rpx;
    border-radius: 50%;
    width: 34rpx;
    height: 34rpx;
    margin-right: 6rpx;
}

.articleBottom-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 240rpx;
}

.articleBottom_tag {
    flex: 1;
}

.articleBottom-left .texe1 {
    height: auto;
    flex: 1;
}

.search_top_back {
    height: 512rpx;
    background-size: 100% 100%;
}

.imgItem {
    position: relative;
    width: calc(100% / 3 - 8rpx);
    height: 222rpx;
    margin-right: 10rpx;

    &:nth-child(3n + 3) {
        margin-right: 0;
    }

    .imgPic {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        margin-right: 0;
    }

    .overLabel {
        border-top-left-radius: 10rpx;
        border-bottom-right-radius: 24rpx;
        line-height: 48rpx;
        width: 48rpx;
        height: 48rpx;
        text-align: center;
        font-size: 22rpx;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        bottom: 0;
        right: 0;
    }
}
</style>
